
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Open Mind</title>

    <!-- CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
    <link href="css/animate.min.css" rel="stylesheet" media="screen">
    <link href="css/lightbox.css" rel="stylesheet" media="screen">
    <link href="css/syntax/shCore.css" rel="stylesheet"  media="screen">
    <link href="css/syntax/shThemeDefault.css" rel="stylesheet"  media="screen">

    
    <link href="css/style.css" rel="stylesheet" media="screen" title="default">
    <link href="css/color-default.css" rel="stylesheet" media="screen" title="default">
    <link href="css/width-full.css" rel="stylesheet" media="screen" title="default">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->
</head>


<body>

    <!-- Setting Options -->
    <div id="color-switcher" class="animated fadeIn animation-dalay-10">
        <div id="color-switcher-tab">
            <i class="fa fa-gear fa fa-2x"></i>
        </div>
        <div id="color-switcher-content">
            <h3>Color Selector</h3>
            <a href="#" rel="color-default.css" class="color default">default</a>
            <a href="#" rel="color-niceblue.css" class="color niceblue">niceblue</a>
            <a href="#" rel="color-intenseblue.css" class="color intenseblue">intenseblue</a>
            <a href="#" rel="color-otherblue.css" class="color otherblue">otherblue</a>
            <a href="#" rel="color-blue.css" class="color blue">blue</a>
            <a href="#" rel="color-puregreen.css" class="color puregreen">puregreen</a>
            <a href="#" rel="color-grassgreen.css" class="color grassgreen">grassgreen</a>
            <a href="#" rel="color-green.css" class="color green">green</a>        
            <a href="#" rel="color-olive.css" class="color olive">olive</a>
            <a href="#" rel="color-gold.css" class="color gold">gold</a>
            <a href="#" rel="color-orange.css" class="color orange">orange</a>
            <a href="#" rel="color-pink.css" class="color pink">pink</a>
            <a href="#" rel="color-fuchsia.css" class="color fuchsia">fuchsia</a>
            <a href="#" rel="color-violet.css" class="color violet">violet</a>
            <a href="#" rel="color-red.css" class="color red">red</a>

            <h3>Container Selector</h3>
            <div class="btn-group">
                <button href="#" class="option btn btn-sm btn-primary" rel="width-boxed.css">Boxed</button>
                <button href="#" class="option btn btn-sm btn-primary" rel="width-full.css">Full Width</button>
            </div>
        </div>
    </div> <!-- color-switcher -->

    <div class="boxed animated fadeIn animation-delay-5">

        <header id="header" class="hidden-xs">
            <div class="container">
                <div id="header-title">
                    <h1 class="animated fadeInDown"><a href="index.html">Open <span>Mind</span></a></h1>
                    <p class="animated fadeInLeft">Clean and elegant theme</p>
                </div>

                <div id="social-header" class="hidden-xs">
                    <a href="#" class="social-icon soc-twitter animated fadeInDown animation-delay-1"><i class="fa fa-twitter"></i></a>
                    <a href="#" class="social-icon soc-google-plus animated fadeInDown animation-delay-2"><i class="fa fa-google-plus"></i></a>
                    <a href="#" class="social-icon soc-facebook animated fadeInDown animation-delay-3"><i class="fa fa-facebook"></i></a>
                    <a href="#" class="social-icon soc-instagram animated fadeInDown animation-delay-4"><i class="fa fa-instagram"></i></a>
                    <a href="#" class="social-icon soc-pinterest animated fadeInDown animation-delay-5"><i class="fa fa-pinterest"></i></a>
                    <a href="#" class="social-icon soc-linkedin animated fadeInDown animation-delay-6"><i class="fa fa-linkedin"></i></a>
                    <a href="#" class="social-icon soc-github animated fadeInDown animation-delay-7"><i class="fa fa-github"></i></a>
                </div>

                <div id="search-header" class="hidden-xs animated bounceInRight">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                            </span>
                    </div><!-- /input-group -->
                </div>
            </div> <!-- container -->
        </header> <!-- header -->

        <nav class="navbar navbar-static-top navbar-mind" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <a class="navbar-brand visible-xs" href="index.html">Open <span>Mind</span></a>

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-mind-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-bars fa-inverse"></i>
                    </button>
                </div>
                
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-mind-collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="index.html">Home Option 1</a></li>
                                <li><a href="home2.html">Home Option 2</a></li>
                            </ul>
                        </li> <!-- dropdown -->

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">UI Elements <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="css.html">CSS</a></li>
                                <li><a href="components.html">Components</a></li>
                                <li><a href="additional_components.html">Additional Components</a></li>
                                <li><a href="layout.html">Layout</a></li>
                            </ul>
                        </li> <!-- dropdown -->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="about.html">About us</a></li>
                                <li><a href="team.html">Our Team</a></li>
                                <li><a href="services.html">Services</a></li>
                                <li><a href="pricing.html">Pricing</a></li>
                                
                                <li><a href="faq.html">FAQ</a></li>
                                <li><a href="coming.html">Coming Soon</a></li>
                                <li><a href="coming2.html">Coming Soon Option 2</a></li>
                                <li><a href="timeline.html">Timeline</a></li>
                                <li><a href="404.html">Error 404</a></li>
                                <li><a href="contact.html">Contact</a></li>
                                <li><a href="full.html">Full Page</a></li>
                                <li class="dropdown-header">User Pages</li>
                                <li><a href="register.html">Register</a></li>
                                <li><a href="login.html">Login</a></li>
                                <li><a href="profile.html">Profile</a></li>
                            </ul>
                        </li> <!-- dropdown -->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="blog.html">Blog Right Sidebar</a></li>
                                <li><a href="blog_right.html">Blog Left Sidebar</a></li>
                                <li><a href="blog_full.html">Blog Full</a></li>
                                <li><a href="single.html">Blog Single</a></li>
                                <li><a href="blog2.html">Blog Other Option</a></li>
                            </ul>
                        </li> <!-- dropdown -->
                        <li class="dropdown active">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class="active"><a href="portfolio.html">Portfolio</a></li>
                                <li><a href="portfolio2.html">Portfolio Option 2</a></li>
                                <li><a href="portfolio_item.html">Portfolio item</a></li>
                            </ul>
                        </li> <!-- dropdown -->
                    </ul> <!-- nav nabvar-nav -->

                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login</a>
                            <div class="dropdown-menu dropdown-login animated fadeInUp">
                                <form role="form">
                                    <h4 class="section-title">Login Form</h4>
         
                                    <div class="form-group">
                                        <div class="input-group login-input">
                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                            <input type="text" class="form-control" placeholder="Username">
                                        </div>
                                        <br>
                                        <div class="input-group login-input">
                                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                            <input type="password" class="form-control" placeholder="Password">
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"> Remember me
                                            </label>
                                        </div>
                                        <button type="submit" class="btn btn-primary pull-right">Login</button>
                                        <div class="clearfix"></div>
                                    </div>
                                </form>      
                            </div>
                        </li> <!-- dropdown -->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">User name</a>
                            <div class="dropdown-menu dropdown-profile animated fadeInUp">
                                <img src="img/avatar.jpg" class="imageborder alignleft" alt="image"> 
                                <h4>Administrator</h4>
                                admin@openmind.com<br>
                                <a href="profile.html">Profile</a> | <a href="#">Logout</a>

                            </div>
                        </li> <!-- dropdown -->
                    </ul> <!-- nav nabvar-nav -->
                </div><!-- navbar-collapse -->
            </div> <!-- container -->
        </nav> <!-- navbar navbar-default -->

        <header class="wrap-title">
            <div class="container">
                <h1 class="page-title">Portfolio</h1>

                <ol class="breadcrumb hidden-xs">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Pages</a></li>
                    <li class="active">Portfolio</li>
                </ol>
            </div>
        </header>
          
        <div class="container">
           <ul class="portfolio-control">
               <li class="filter active" data-filter="all">All Items</li>
               <li class="filter" data-filter="1">Web Design</li>
               <li class="filter" data-filter="2">IOS App</li>
               <li class="filter" data-filter="3">Android App</li>
               <li class="filter" data-filter="4">Windows App</li>
           </ul>

           <div class="row" id="Grid">
               <div class="col-sm-6 col-lg-3 col-md-4 mix 1 2">
                   <div class="img-caption">
                       <img src="img/w1.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal1"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w1.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->

               <div class="col-sm-6 col-lg-3 col-md-4 mix 3 4">
                   <div class="img-caption">
                       <img src="img/w2.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal2"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w2.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->

               <div class="col-sm-6 col-lg-3 col-md-4 mix 1 4">
                   <div class="img-caption">
                       <img src="img/w3.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal3"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w3.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->

               <div class="col-sm-6 col-lg-3 col-md-4 mix 2 3">
                   <div class="img-caption">
                       <img src="img/w4.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal4"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w4.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->

               <div class="col-sm-6 col-lg-3 col-md-4 mix 1 4">
                   <div class="img-caption">
                       <img src="img/w5.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal5"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w5.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->

               <div class="col-sm-6 col-lg-3 col-md-4 mix 2 3">
                   <div class="img-caption">
                       <img src="img/w6.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal6"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w6.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->

               <div class="col-sm-6 col-lg-3 col-md-4 mix 1 3">
                   <div class="img-caption">
                       <img src="img/w7.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal7"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w7.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->

               <div class="col-sm-6 col-lg-3 col-md-4 mix 4 2">
                   <div class="img-caption">
                       <img src="img/w8.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal8"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal8" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w8.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->

               <div class="col-sm-6 col-lg-3 col-md-4 mix 1 4">
                   <div class="img-caption">
                       <img src="img/w9.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal9"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal9" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w9.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->

               <div class="col-sm-6 col-lg-3 col-md-4 mix 2 4">
                   <div class="img-caption">
                       <img src="img/w10.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal10"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal10" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w10.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->

               <div class="col-sm-6 col-lg-3 col-md-4 mix 2 3">
                   <div class="img-caption">
                       <img src="img/w11.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal11"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w11.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->

               <div class="col-sm-6 col-lg-3 col-md-4 mix 1 3">
                   <div class="img-caption">
                       <img src="img/w12.jpg" class="img-responsive" alt="Image">
                       <div class="caption">
                           <div class="caption-content">
                               <a href="#" class="animated fadeInDown" data-toggle="modal" data-target="#myModal12"><i class="fa fa-search"></i>More info</a>
                               <h4>Title Work</h4>
                           </div>
                       </div>
                   </div>
               </div>
               <!-- Modal -->
               <div class="modal fade" id="myModal12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                               <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                           </div>
                           <div class="modal-body">
                               <img src="img/w12.jpg" class="img-responsive" alt="Image">
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, corporis, maxime, hic facere recusandae nam distinctio magni perferendis quis suscipit voluptates itaque nisi ea atque obcaecati laudantium quaerat omnis fugiat doloremque repellendus dolorem et labore reiciendis accusamus culpa. Similique.</p>
                               <p>Aliquid, numquam, aspernatur quos nam tempora repellat soluta facilis ipsa debitis iure officia excepturi optio tenetur provident nobis sapiente inventore porro eveniet ab dolore nisi neque vel laboriosam aut id.</p>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                               <a href="portfolio_item.html" class="btn btn-primary" role="button">View more</a>
                           </div>
                       </div><!-- modal-content -->
                   </div><!-- modal-dialog -->
               </div><!-- modal -->
               
           </div> <!-- row -->
        </div> <!-- container  -->

        <aside id="footer-widgets">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <h3 class="footer-widget-title">Sitemap</h3>
                        <ul class="list-unstyled three_cols">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Portafolio</a></li>
                            <li><a href="#">Works</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Pricing</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Our Team</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">Login</a></li>
                            <li><a href="#">Cantact</a></li>
                        </ul>
                        <h3 class="footer-widget-title">Subscribe</h3>
                        <p>Lorem ipsum Amet fugiat elit nisi anim mollit in labore ut esse Duis ullamco ad dolor veniam velit lorem ipsum dolor sit amet, consectetur adipisicing..</p>
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Email Adress">
                            <span class="input-group-btn">
                                <button class="btn btn-success" type="button">Subscribe</button>
                            </span>
                        </div><!-- /input-group -->
                    </div>
                    <div class="col-md-4">
                        <div class="footer-widget">
                            <h3 class="footer-widget-title">Recent Post</h3>
                            <div class="media">
                                <a class="pull-left" href="#"><img class="media-object" src="img/m2.jpg" width="75" height="75" alt="image"></a>
                                <div class="media-body">
                                    <h4 class="media-heading"><a href="#">Lorem ipsum Duis quis occaecat minim lorem ipsum tempor officia labor</a></h4>
                                    <small>August 18, 2013</small>
                                </div>
                            </div>
                            <div class="media">
                                <a class="pull-left" href="#"><img class="media-object" src="img/m11.jpg" width="75" height="75" alt="image"></a>
                                <div class="media-body">
                                    <h4 class="media-heading"><a href="#">Lorem ipsum dolor excepteur sunt in lorem ipsum cillum tempor</a></h4>
                                    <small>September 14, 2013</small>
                                </div>
                            </div>
                            <div class="media">
                                <a class="pull-left" href="#"><img class="media-object" src="img/m4.jpg" width="75" height="75" alt="image"></a>
                                <div class="media-body">
                                    <h4 class="media-heading"><a href="#">Lorem ipsum Dolor cupidatat adipisicing et fugiat</a></h4>
                                    <small>October 9, 2013</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="footer-widget">
                            <h3 class="footer-widget-title">Recent Works</h3>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6">
                                    <a href="#" class="thumbnail"><img src="img/wf1.jpg" class="img-responsive" alt="Image"></a>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6">
                                    <a href="#" class="thumbnail"><img src="img/wf2.jpg" class="img-responsive" alt="Image"></a>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6">
                                    <a href="#" class="thumbnail"><img src="img/wf3.jpg" class="img-responsive" alt="Image"></a>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6">
                                    <a href="#" class="thumbnail"><img src="img/wf4.jpg" class="img-responsive" alt="Image"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- row -->
            </div> <!-- container -->
        </aside> <!-- footer-widgets -->

        <footer id="footer">
            <p>&copy; 2013 <a href="#">Open Mind</a>, inc. All rights reserved.</p>
        </footer>

    </div> <!-- boxed -->


    <div id="back-top">
        <a href="#header"><i class="fa fa-chevron-up"></i></a>
    </div>

    <!-- Scripts -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.mixitup.min.js"></script>
    <script src="js/lightbox-2.6.min.js"></script>
    <script src="js/holder.js"></script>
    <script src="js/app.js"></script>
    <script src="js/styleswitcher.js"></script>

    <script src="js/syntax/shCore.js"></script>
    <script src="js/syntax/shBrushXml.js"></script>
    <script src="js/syntax/shBrushJScript.js"></script>

    <script type="text/javascript">
        SyntaxHighlighter.all()
    </script>
</body>

</html>
